:root {
    --ink:        #12110f;
    --paper:      #f3f1ea;
    --paper-warm: #ede8de;
    --paper-rule: #d7d1c4;
    --white: #FFFFFF;
    --status-gray: #888888;

    /* accents — warm pastels */
    --peach:      #f2a97e;
    --blush:      #e78fa0;
    --butter:     #f1d67c;
    --peach-pale: #f8cdb5;
    --blush-pale: #f1aab8;
    --butter-pale:#f7e8b5;

    --mono: 'Space Mono', monospace;
    --serif: 'Playfair Display', Georgia, serif;
    --sans: 'DM Sans', sans-serif;

    /* animation variables */

    --randRotate: 2deg
  } 

  /* animations */

@keyframes hover{
    to {
        transform: translateY(5px);
        rotate: var(--randRotate);
    }
}

.float-animation{
    animation: 2s infinite alternate ease-in-out hover;
}

html {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.6;
    scroll-behavior: smooth;
  }

body {
    margin: 0 auto;
  }

/* HEAD */

#head {
height:12vh;
display: flex;
justify-content:center;
align-items:center;
gap:3rem;
/* background-color:#f0d080; */

}

.title{
    font-family: var(--serif);
    font-size: clamp(52px, 10vw, 88px);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.02em;
    margin: 0.1rem;
}

.title span{
    color:var(--blush);
}

/* NAVBAR */

#navbar{
    background-color: var(--ink);
    position: sticky;
    top:0;
    display:flex;
    justify-content:space-between;
    z-index: 1;
}

#navbar a {
    font-family: var(--mono);
    color: var(--paper);
    font-size: 19px;
    text-decoration: none;
    padding: 0px 2rem 0px 1rem;
    opacity: 60%;
    transition: opacity 0.15s, background 0.15s;
}

#navbar a:hover {
    opacity: 100%;
    background-color: #000000ff;
}

/* SCROLLBAR */

.gizmo-scrollbar{
    scrollbar-width:thin;
}

.gizmo-scrollbar::-webkit-scrollbar{
    background-color: var(--blush);

}